<template>
    <div>
        <div class="container">

                <div class="handle-box">
                    <el-row>&nbsp;&nbsp;&nbsp;
                        <el-col :span="4">
                            <el-select v-model="renew.feature1"   clearable filterable placeholder="请选择">
                                <el-option key="1" label="市场查获" value="市场查获"></el-option>
                                <el-option key="2" label="投诉举报" value="投诉举报"></el-option>
                                <el-option key="3" label="上级交办" value="上级交办"></el-option>
                            </el-select>
                        </el-col>&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-col :span="4">
                            <el-select v-model="renew.feature2" clearable placeholder="请选择" >
                                <el-option key="1" label="一般案件" value="一般案件"></el-option>
                                <el-option key="2" label="简易案件" value="简易案件"></el-option>
                            </el-select>
                        </el-col>&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-col :span="4">
                            <el-select v-model="renew.feature3" clearable placeholder="请选择" >
                                <el-option key="1" label="市场查获" value="市场查获"></el-option>
                                <el-option key="2" label="投诉举报" value="投诉举报"></el-option>
                                <el-option key="3" label="上级交办" value="上级交办"></el-option>
                            </el-select>
                        </el-col>&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-col :span="4">
                            <el-select v-model="renew.feature4" clearable placeholder="请选择" >
                                <el-option key="1" label="市场查获" value="市场查获"></el-option>
                                <el-option key="2" label="投诉举报" value="投诉举报"></el-option>
                                <el-option key="3" label="上级交办" value="上级交办"></el-option>
                            </el-select>
                        </el-col>&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-col :span="4">
                            <el-select v-model="renew.feature5" clearable placeholder="请选择" >
                                <el-option key="1" label="市场查获" value="市场查获"></el-option>
                                <el-option key="2" label="投诉举报" value="投诉举报"></el-option>
                                <el-option key="3" label="上级交办" value="上级交办"></el-option>
                            </el-select>
                        </el-col>&nbsp;&nbsp;&nbsp;
                        <el-col :span="2">
                            <el-button type="primary" @click="renew_message" >更新</el-button>
                        </el-col>
                    </el-row>

                </div>

            <div>
                <div id="myECharts"></div>
            </div>
        </div>

    </div>

</template>

<script setup name="basetable">
import { ref, reactive } from 'vue';

import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus,Printer } from '@element-plus/icons-vue';
import {
    case_evi_Create,
    case_evi_Views,
    case_legal_Create,
    ciga_evudence_Create,
    end_record_data,
    evi_Views,
    fetchData_case,
    fetchData_case_Create,
    fetchData_case_update,
    fetchData_legal_clause,
    fetchData_mer,
    fetchData_s_mongodb_evidence_Cre,
    fetchData_s_mongodb_evidence_Views,
    fetchData_tobacco,
    fetchData_user,
    illegal_record_data,
    illegal_record_Search,
    mer_Create,
    mer_search_api,
    review_price_data,
    staff_evidence_create,
    staff_evidence_data,
    end_record_show,
    record_inquiry_show,
    record_inquiry_print,
    case_evidence_Views,
    case_evidence_Edit,
    question_answer_clause_delete,
    price_review_clause_delete,
    fetchData_user_Edit,
    fetchData_price_Edit,
    hearing_arrive_document,
    fetchData_interrogator_clause,
    fetchData_inquiry_record_Confirm,
    fetchData_arrive_document_Confirm,
    hearing_notice_data,
    fetchData_hearing_notice_Confirm,
    hearing_notice_browse_data,
    penalty_advance_notice_data,
    fetchData_advance_notice_Confirm,
    advance_arrive_document,
    advance_penalty_data,
    arrive_document_print_data,
    fetchData_time_upload,
    fetchData_return_item_clause,
    return_item_Views,
    return_item_Create,
    return_item_clause_delete,
    fetchData_case_return_Confirm,
    administrative_fine_browse_data, inquiry_record_print_data, return_item_print_data
} from '../api/index';
import {
    export_word_19,
} from './table_inquiry.vue'


const renew=reactive({
    feature1:'',
    feature2:'',
    feature3:'',
    feature4:'',
    feature5:''
})



const renew_message=()=>{


}

</script>
<script>
import $ from 'jquery'
const ROOT_PATH = 'https://echarts.apache.org/examples';

export default {
    data() {
        return {};
    },
    methods: {
        // graph
        graphE() {
            //alert("Show Graph");
            const myChart= this.$echarts.init(document.getElementById("myECharts"));
            myChart.showLoading();
            $.getJSON('src/les-miserables.json', function (graph) {
                myChart.hideLoading();
                const option = {
                    tooltip: {},
                    legend: [
                        {
                            data: graph.categories.map(function (a) {
                                return a.name;
                            })
                        }
                    ],
                    series: [
                        {
                            name: 'Les Miserables',
                            type: 'graph',
                            layout: 'none',
                            data: graph.nodes,
                            links: graph.links,
                            categories: graph.categories,
                            roam: true,
                            label: {
                                show: true,
                                position: 'right',
                                formatter: '{b}'
                            },
                            labelLayout: {
                                hideOverlap: true
                            },
                            scaleLimit: {
                                min: 0.4,
                                max: 2
                            },
                            lineStyle: {
                                color: 'source',
                                curveness: 0.3
                            }
                        }
                    ]
                };
                myChart.setOption(option);
                // 根据页面大小自动响应图表大小
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            });
        },
    },
    mounted() {
        this.graphE();
    },
};
</script>
<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }
    .handle-box button{
        background-color: #00a854;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }

    :deep(.avatar){
        width: 100px;
        height: 100px;
    }
    .blue {
        color: rgba(0, 118, 252, 0.79);
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 500px;
        height: 500px;
    }
    .dialog-footer button{
        background-color: #00a854;
        color:white;
    }


    /*#inspect_record{*/
    /*  position: relative;*/
    /*  left: 0px;*/
    /*  top: -20px;*/

    /*}*/

    /*#filing_report_review{*/
    /*  position: relative;*/
    /*  left: 0px;*/
    /*  top: -22px;*/
    /*}*/
</style>
<style lang="scss" scoped>
    #myECharts {
        min-width: 60rem;
        min-height: 40rem;
        // max-height: 500px;
    }
</style>
<!--<template>-->
<!--    <div class="handle-box">-->
<!--        <el-select v-model="renew.feature1"   clearable filterable placeholder="请选择">-->
<!--            <el-option key="1" label="市场查获" value="市场查获"></el-option>-->
<!--            <el-option key="2" label="投诉举报" value="投诉举报"></el-option>-->
<!--            <el-option key="3" label="上级交办" value="上级交办"></el-option>-->
<!--        </el-select>-->
<!--        &nbsp;&nbsp;-->
<!--        <el-select v-model="renew.feature2" clearable placeholder="请选择" >-->
<!--            <el-option key="1" label="一般案件" value="一般案件"></el-option>-->
<!--            <el-option key="2" label="简易案件" value="简易案件"></el-option>-->
<!--        </el-select>&nbsp;&nbsp;-->
<!--        <el-select v-model="renew.feature3" clearable placeholder="请选择" >-->
<!--            <el-option key="1" label="市场查获" value="市场查获"></el-option>-->
<!--            <el-option key="2" label="投诉举报" value="投诉举报"></el-option>-->
<!--            <el-option key="3" label="上级交办" value="上级交办"></el-option>-->
<!--        </el-select>&nbsp;&nbsp;-->
<!--        <el-select v-model="renew.feature4" clearable placeholder="请选择" >-->
<!--            <el-option key="1" label="市场查获" value="市场查获"></el-option>-->
<!--            <el-option key="2" label="投诉举报" value="投诉举报"></el-option>-->
<!--            <el-option key="3" label="上级交办" value="上级交办"></el-option>-->
<!--        </el-select>&nbsp;&nbsp;-->
<!--        <el-select v-model="renew.feature5" clearable placeholder="请选择" >-->
<!--            <el-option key="1" label="市场查获" value="市场查获"></el-option>-->
<!--            <el-option key="2" label="投诉举报" value="投诉举报"></el-option>-->
<!--            <el-option key="3" label="上级交办" value="上级交办"></el-option>-->
<!--        </el-select>&nbsp;&nbsp;-->
<!--        <el-button type="primary"  >更新</el-button>-->
<!--    </div>-->
<!--    <br><br>-->
<!--&lt;!&ndash;    <div>&ndash;&gt;-->
<!--&lt;!&ndash;        <div id="myECharts"></div>&ndash;&gt;-->
<!--&lt;!&ndash;    </div>&ndash;&gt;-->
<!--</template>-->

<!--<script >-->
<!--import { ref, reactive } from 'vue';-->
<!--import { ElMessage, ElMessageBox } from 'element-plus';-->
<!--import { Delete, Edit, Search, Plus,Printer } from '@element-plus/icons-vue';-->
<!--import $ from 'jquery'-->
<!--// const ROOT_PATH = 'https://echarts.apache.org/examples';-->


<!--// export default {-->
<!--//     data() {-->
<!--//         return {};-->
<!--//     },-->
<!--//     methods: {-->
<!--//         // graph-->
<!--//         graphE() {-->
<!--//             //alert("Show Graph");-->
<!--//             const myChart= this.$echarts.init(document.getElementById("myECharts"));-->
<!--//             myChart.showLoading();-->
<!--//             $.getJSON('src/les-miserables.json', function (graph) {-->
<!--//                 myChart.hideLoading();-->
<!--//                 const option = {-->
<!--//                     tooltip: {},-->
<!--//                     legend: [-->
<!--//                         {-->
<!--//                             data: graph.categories.map(function (a) {-->
<!--//                                 return a.name;-->
<!--//                             })-->
<!--//                         }-->
<!--//                     ],-->
<!--//                     series: [-->
<!--//                         {-->
<!--//                             name: 'Les Miserables',-->
<!--//                             type: 'graph',-->
<!--//                             layout: 'none',-->
<!--//                             data: graph.nodes,-->
<!--//                             links: graph.links,-->
<!--//                             categories: graph.categories,-->
<!--//                             roam: true,-->
<!--//                             label: {-->
<!--//                                 show: true,-->
<!--//                                 position: 'right',-->
<!--//                                 formatter: '{b}'-->
<!--//                             },-->
<!--//                             labelLayout: {-->
<!--//                                 hideOverlap: true-->
<!--//                             },-->
<!--//                             scaleLimit: {-->
<!--//                                 min: 0.4,-->
<!--//                                 max: 2-->
<!--//                             },-->
<!--//                             lineStyle: {-->
<!--//                                 color: 'source',-->
<!--//                                 curveness: 0.3-->
<!--//                             }-->
<!--//                         }-->
<!--//                     ]-->
<!--//                 };-->
<!--//                 myChart.setOption(option);-->
<!--//                 // 根据页面大小自动响应图表大小-->
<!--//                 window.addEventListener("resize", function () {-->
<!--//                     myChart.resize();-->
<!--//                 });-->
<!--//             });-->
<!--//         },-->
<!--//     },-->
<!--//     mounted() {-->
<!--//         this.graphE();-->
<!--//     },-->
<!--// };-->
<!--</script>-->

<!--<style lang="scss" scoped>-->
<!--#myECharts {-->
<!--    min-width: 60rem;-->
<!--    min-height: 40rem;-->
<!--    // max-height: 500px;-->
<!--}-->
<!--.handle-box button{-->
<!--    background-color: #00a854;-->
<!--}-->
<!--</style>-->
